<template>
  <div>
    <!-- 1.操作按钮区域 -->
    <div class="but">
        <el-button size="mini" type="primary" @click="buffer.isShow=true">添加</el-button>
        <el-button size="mini" type="warning">批量删除</el-button>
    </div>
    <!-- 2.数据列表区域 -->
    <list-comp :menuList="menuList" @edit="editMenu" @remove="removeMenu"></list-comp>

    <!-- 3.表单区域 -->
    <form-comp :buffer="buffer" ref="formRef" :menuList="menuList" @channel="getMenuList"></form-comp>
  </div>
</template>

<script>
//引入数据列表、添加编辑表单组件
import listComp from './components/List.vue'
import formComp from './components/Form.vue'

export default {

  components: {
    listComp,formComp
  },
  data() {
  return {
    menuList:[],//菜单数据
      buffer:{
        isShow:false
      }
    };
  },

  mounted() {
    //1.获取全部的菜单（权限）数据
    this.getMenuList();
  },
  methods: {
    //1.获取全部的菜单（权限）数据
    getMenuList(){
       this.$api.reqMenuList({istree:true})
       .then(res=>{
        this.menuList = res? res:[]//为了避免为空 循环就会报错
       })
       .catch(err=>console.log(err))
    },
    //2.编辑菜单数据
    editMenu(info){
      // console.log(info)
      //2.1解构获取list组件传递的修改数据
      let {index,row} = info
      //2.2删除无用字段
      if(row.children){delete row.children}

      // //2.3父组件如何操作子组件 ref 将修改的旧数据赋值给form组件并弹窗展示
      this.$refs.formRef.form = JSON.parse(JSON.stringify(row))
      // //2.4弹窗 表单组件
      this.buffer.isShow =true
    },
    //3.删除菜单数据
    removeMenu(info){
      //3.1解构获取list组件传递的修改数据
      let {index,row} = info
      //3.2提示用户是否删除
       this.$confirm('确定要删除吗?', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //3.3用户同意删除
          this.$api.reqMenuRemove({id:row.id})
          .then(res=>{
            //3.4提示删除成功
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success'
            });
            //3.5更新列表 重新获取列表数据
            this.getMenuList()
          })
          .catch(err=>console.log(err))
          
        }).catch(() => {});
    }

  },
};
</script>

<style scoped>
.but{
    margin: 20px 0;
}
</style>

